<template>
  <el-dialog :close-on-click-modal="false" title="采购单选择"
             v-if="showFlag"
             :visible.sync="showFlag"
             :modal="false"
             width="80%"
             center>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="采购单编号" prop="purchaseOrderCode">
            <el-input v-model="queryParams.purchaseOrderCode" placeholder="请输入采购单编号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购员" prop="purchaseName">
            <el-input v-model="queryParams.purchaseName" placeholder="请输入采购员" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="10" >
          <el-form-item label="单据日期" >
            <el-date-picker
              v-model="startInvoicesDateArr"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              placeholder="请选择单据日期"
              clearable
              @change="handleDateRangeChangeInvoicesDate"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10"  >
          <el-form-item label="交货日期" label-align="left" prop="deliveryDate">
            <el-date-picker
              v-model="startDeliveryDateArr"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              placeholder="请选择交货日期"
              clearable
              @change="handleDateRangeChangeDeliveryDate"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-left: -60px">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="orderList" @current-change="handleCurrent" @row-dblclick="handleRowDbClick">

      <el-table-column  width="55" align="center" >
        <template v-slot="scope">
          <el-radio v-model="purchaseOrderId" :label="scope.row.purchaseOrderId" @change="handleRowChange(scope.row)">{{""}}</el-radio>
        </template>
      </el-table-column>

      <el-table-column label="采购单编号" prop="purchaseOrderCode" />
      <el-table-column label="采购员" prop="purchaseName" />
      <el-table-column label="单据日期" prop="invoicesDate" />
      <el-table-column label="交货日期" prop="deliveryDate" />
      <el-table-column label="平台渠道" prop="platformChannels" />
      <el-table-column label="订单金额" prop="orderAmount" />
      <el-table-column label="实际金额" prop="actualAmount" />
      <el-table-column label="供应商名称" prop="vendorName" />
      <el-table-column label="供应商名称" prop="startInvoicesDateArr" v-if="false" />
      <el-table-column label="供应商名称" prop="startInvoicesDate" v-if="false" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmSelect">确定</el-button>
      <el-button @click="showFlag=false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {listPurchase} from "@/api/mes/wm/purchaseOrder";

export default {
  name: "PurchaseOrderSelect",
  data() {
    return {
      showFlag: false,
      selectedRow: undefined,
      purchaseOrderId:undefined,
      loading: true,
      total: 0,
      orderList: [],
      showSearch:true,
      startInvoicesDateArr:null,
      startDeliveryDateArr:null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        purchaseOrderCode: null,
        purchaseName: null,
        startInvoicesDate: '',
        endInvoicesDate:'',
        startDeliveryDate:'',
        endDeliveryDate:'',
        deliveryDate: null,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {

      console.log()
      // 假设这是一个后端API调用，根据queryParams获取数据
      // 这里应该有一个实际的API调用，例如：listPurchaseOrders(this.queryParams)
      this.loading = true;
      listPurchase(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**
     * 搜索
     */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 重置
     */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.queryParams.startInvoicesDate=''
      this.queryParams.endInvoicesDate=''
      this.queryParams.startDeliveryDate=''
      this.queryParams.endDeliveryDate=''
      this.startDeliveryDateArr=''
      this.startInvoicesDateArr=''
      this.queryParams.purchaseName=''
      this.handleQuery();
    },
    //当前行被选中
    handleCurrent(row) {
      this.selectedRow = row;
    },
    /**
     * 双击选中
     * @param row
     */
    handleRowDbClick(row) {
      this.selectedRow = row;
      this.$emit('onSelectedPurchase', this.selectedRow);
      this.showFlag = false;
    },
    // 单选选中数据
    handleRowChange(row) {
      debugger;
      if(row){
        this.selectedRow = row;
      }
    },

    /**
     * 单据开始和结束时间
     * @param value
     */
    handleDateRangeChangeInvoicesDate(value){
      this.queryParams.startInvoicesDate = value[0];
      this.queryParams.endInvoicesDate = value[1];
    },
    /**
     * 交货开始和结束时间
     * @param value
     */
    handleDateRangeChangeDeliveryDate(value){
      this.queryParams.startDeliveryDate = value[0];
      this.queryParams.endDeliveryDate = value[1];
    },

    /**
     * 确认选择
     */
    confirmSelect() {
      if (!this.selectedRow) {
        this.$notify({
          title: '提示',
          type: 'warning',
          message: '请至少选择一条数据!'
        });
        return;
      }
      this.$emit('onSelectedPurchase', this.selectedRow);
      this.showFlag = false;
    }
  }
};
</script>
